<template>
	<z-nav-bar :title="title">
		<template v-slot:right>
			<view v-if="course.id" class="uni-red" @click="delCourseFun">删除</view>
		</template>
	</z-nav-bar>
	<view class="top-box">
		<view v-if="type" class="item flex_sbc">
			<view class="z-font-32">课程节次</view>
			<view class="flex_sbc input-box">
				<input type="number" placeholder="请输入课程节次(数字)" placeholder-class="uni-placeholder" />
				<view>课</view>
			</view>
		</view>
		<view class="item flex_sbc">
			<view class="z-font-32">课程名称</view>
			<view class="flex_sbc input-box">
				<input
					v-model="course.name"
					type="text"
					placeholder="请输入课程名称"
					placeholder-class="uni-placeholder"
				/>
			</view>
		</view>
		<view v-if="type" class="item flex_sbc">
			<view class="z-font-32">课程时间</view>
			<view>
				<uni-datetime-picker v-model="single">
					<view class="flex_sbc input-box">
						<view v-if="single">{{ single }}</view>
						<view v-else class="uni-placeholder">请选择课程时间</view>
						<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="icon-size-32"></image>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="item flex_sbc">
			<view class="z-font-32">课程课时</view>
			<view class="flex_sbc input-box">
				<input
					v-model="course.duration"
					type="number"
					placeholder="请输入课时"
					placeholder-class="uni-placeholder"
				/>
			</view>
		</view>
	</view>
	<view class="line-spacing" style="height: 20rpx"></view>
	<view class="add-box flex_sbc">
		<view class="z-font-32">
			<text class="uni-red">*</text>
			<text>添加需要解决的训练问题</text>
		</view>
		<view class="add" @click="addObj(0)">添加</view>
	</view>
	<view v-for="(question, index) in course.questionList" :key="question.id" class="common-box">
		<view class="flex_sbc">
			<view class="z-font-32">{{ question.name }}</view>
			<uni-icons type="clear" color="#FF0000" size="22" @click="course.questionList.splice(index, 1)"></uni-icons>
		</view>
		<view class="uni-color-grey z-font-24 uni-mt-8">
			关联解决方案{{ question.relScheme.split(',').length - 1 }}个
		</view>
		<view class="flex_sbc uni-mt-68 uni-mb-32">
			<view>解决方案</view>
			<view class="add" @click="addObj(1, index)">添加</view>
		</view>
		<view v-for="(scheme, sindex) in question.schemeList || []" :key="scheme.id" class="plan-item flex_fsc">
			<image :src="setting.oss_pub_domain + scheme.coverImage" mode="aspectFill" class="img"></image>
			<view class="uni-ml-20 width-100">
				<view class="flex_sbc width-100">
					<view>{{ scheme.name }}</view>
					<view class="uni-red" @click="question.schemeList.splice(sindex, 1)">删除</view>
				</view>
				<view class="z-font-24 uni-color-grey uni-mt-8 uni-mt-16">{{ scheme.description }}</view>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { getCourseDetails, addCourse, editCourse, delCourse } from '@/api/course.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const type = ref(0);
let eventChannel;
onLoad((opt) => {
	type.value = parseInt(opt.type || 0);
	eventChannel = that.getOpenerEventChannel();
});

const single = ref();

const course = reactive({
	name: '',
	duration: '',
	questionList: []
});
Object.assign(course, uni.getStorageSync('edit-course') || {});
course.id && getCourseDetails(course.id).then(res => {
		Object.assign(course, res);
		uni.setStorageSync('edit-course', res)
	})
const title = course.id ? '编辑课程' : '新增课程';

function addObj(type, index) {
	uni.navigateTo({
		url: `/pages/player/add/item-scheme/item-scheme?type=${type}`,
		events: {
			selObj: (data) => {
				console.log(data);
				if (type) {
					course.questionList[index].schemeList = data;
				} else {
					course.questionList = data;
				}
			}
		},
		success: (res) => {
			res.eventChannel.emit('list', type ? course.questionList[index].schemeList : course.questionList);
		}
	});
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	if (!course.name) return that.tools.alert('请输入课程名称');
	if (!course.duration) return that.tools.alert('请输入课时');
	let relQuestionScheme = {};
	course.questionList.forEach((item) => {
		relQuestionScheme[item.id] = item.schemeList ? item.schemeList.map((el) => el.id) : [];
	});
	relQuestionScheme = JSON.stringify(relQuestionScheme);
	const postData = {
		name: course.name,
		duration: course.duration,
		relQuestionScheme
	};
	const cindex = course.id ? 0 : 1;
	const funName = course.id ? editCourse : addCourse;
	funName(postData, course.id).then((res) => {
		eventChannel.emit('editDone');
		uni.navigateBack();
	});
}


function delCourseFun() {
	uni.showModal({
		title: '删除提示',
		content: '确定要删除该课程吗？',
		success: res => {
			if (res.confirm) {
				delCourse(course.id).then(res => {
					uni.navigateBack()
					that.tools.alert('删除成功')
					eventChannel.emit('editDone');
				})
			}
		}
	})
}
</script>

<style lang="scss">
@import 'edit.scss';
</style>